<template>
  <div class="page-wrap" @dblclick="handleDbclick" id="page-wrap">
    <div class="time-clock-page" v-if="!flag">
      <div class="clock-face">
        <div class="bar-seconds">
          <span :style="{ '--index': item }" v-for="item in 60" :key="item">
            <p></p>
          </span>
        </div>
        <div class="number-hours">
          <span :style="{ '--index': item }" v-for="item in 12" :key="item">
            <p>{{ item }}</p>
          </span>
        </div>
        <div class="handles-box">
          <div class="handle hours" :style="{ transform: `rotate(${timeDeg.hours}deg)` }">
            <i></i>
          </div>
          <div class="handle minutes" :style="{ transform: `rotate(${timeDeg.minutes}deg)` }">
            <i></i>
          </div>
          <div class="handle seconds" :style="{ transform: `rotate(${timeDeg.seconds}deg)` }">
            <i></i>
          </div>
        </div>
      </div>
      <div class="time-tip">
        距离跨年还剩{{ timeDiff.days }}天{{ timeDiff.hours }}时{{ timeDiff.minutes }}分{{
          timeDiff.seconds
        }}秒
      </div>
    </div>
    <fireworks v-else></fireworks>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import dayjs from 'dayjs'
import router from '@/router'
import fireworks from '../fireworks/index.vue'
const timeDeg = reactive({
  hours: 0,
  minutes: 0,
  seconds: 0
})
const timeDiff = reactive({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0
})
const timeDegInterval = ref(null)
const flag = ref(false)
const handleTimeDeg = () => {
  const date = new Date()
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  timeDeg.hours = hours * 30 + minutes / 2
  timeDeg.minutes = minutes * 6
  timeDeg.seconds = seconds * 6
  const futureTime = new Date('2025-1-1 00:00:00')
  let dayDiff = dayjs(futureTime).diff(dayjs(date), 'day')
  let hoursDiff = dayjs(futureTime).diff(dayjs(date), 'hour')
  let minutesDiff = dayjs(futureTime).diff(dayjs(date), 'minute')
  let secondsDiff = dayjs(futureTime).diff(dayjs(date), 'second')
  timeDiff.days = dayDiff
  timeDiff.hours = hoursDiff % 24
  timeDiff.minutes = minutesDiff % 60
  timeDiff.seconds = secondsDiff % 60
  if (secondsDiff <= 0) {
    flag.value = true
  }
}

const handleDbclick = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen()
  }
  router.push('/bm')
}

onMounted(() => {
  document.documentElement.requestFullscreen()
  handleTimeDeg()
  timeDegInterval.value = setInterval(() => {
    handleTimeDeg()
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timeDegInterval.value)
})
</script>

<style scoped lang="scss">
.page-wrap {
  width: 100%;
  height: 100%;
  transform-origin: top left;
  .time-clock-page {
    width: 100%;
    height: 100%;
    background-color: #081b29;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    .clock-face {
      width: 31.25rem;
      height: 31.25rem;
      border-radius: 50%;
      position: relative;
      .bar-seconds,
      .number-hours {
        position: absolute;
        top: 0;
        height: 0;
        width: 100%;
        height: 100%;
      }
      .number-hours {
        span {
          position: absolute;
          transform: rotate(calc(var(--index) * 30deg));
          inset: 0.375rem;
          text-align: center;
          p {
            font-size: 3.25rem;
            color: #0ef;
            text-shadow: 0 0 10px #0ef;
            transform: rotate(calc(var(--index) * -30deg));
          }
        }
      }
      .handles-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        .handle {
          position: absolute;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          i {
            display: inline-block;
            transform-origin: bottom;
            border-radius: 50%;
          }
        }
        .hours {
          width: 20rem;
          height: 20rem;
          i {
            width: 0.5rem;
            height: 10rem;
            background: #0ef;
            box-shadow: 0 0 0.625rem #0ef;
          }
        }
        .minutes {
          width: 28.125rem;
          height: 28.125rem;
          i {
            width: 0.375rem;
            height: 14.0625rem;
            background: #0ef;
            box-shadow: 0 0 0.625rem #0ef;
          }
          &::before {
            content: '';
            width: 1.5625rem;
            height: 1.5625rem;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #0ef;
            box-shadow: 0 0 0.3125rem #0ef;
          }
        }
        .seconds {
          width: 30rem;
          height: 30rem;
          i {
            width: 0.25rem;
            height: calc(15rem + 4.375rem);
            background: white;
          }
          &::before {
            content: '';
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-55%);
            background: #fff;
            box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
          }
        }
      }
      .bar-seconds {
        span {
          position: absolute;
          transform: rotate(calc(var(--index) * 6deg));
          inset: -1.25rem;
          text-align: center;
          p {
            display: inline-block;
            width: 0.125rem;
            height: 0.75rem;
            background: #0ef;
            box-shadow: 0 0 10px #0ef;
          }
          &:nth-child(5n) {
            p {
              background: #0ef;
              width: 0.375rem;
              height: 1.125rem;
              transform: translateY(0.0625rem);
              border-radius: 0.3125rem;
            }
          }
        }
      }
    }
    .time-tip {
      background: linear-gradient(to right, #0ef, #feb47b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 3.75rem;
      text-align: center;
    }
  }
}
</style>